<template>
  <view class="result-page">
    <!-- 顶部搜索栏 -->
    <view class="result-header">
      <view class="search-bar">
        <uni-icons type="search" size="20" color="#bbb" />
        <input class="search-input" v-model="keyword" placeholder="搜索商品" />
        <text v-if="keyword" class="search-clear" @click="clearKeyword">×</text>
        <button class="search-btn" @click="onSearch">查询</button>
      </view>
      <uni-icons type="cart" size="22" class="cart-icon" @click="goCart" />
    </view>
    <!-- 排序tab -->
    <view class="filter-tabs">
      <view
        v-for="tab in sortTabs"
        :key="tab.type"
        :class="['tab-item', {active: (tab.type === 3 ? (sortType === 3 || sortType === 4) : sortType === tab.type)}]"
        @click="changeSort(tab.type)"
      >
        <text>{{ tab.label }}</text>
        <text v-if="tab.type === 3 && (sortType === 3 || sortType === 4)" class="price-arrow">
          {{ sortType === 3 ? '↑' : '↓' }}
        </text>
        <view v-if="tab.type === 3 ? (sortType === 3 || sortType === 4) : sortType === tab.type" class="tab-underline"></view>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="goods-row" v-for="(row, rowIdx) in goodsRows" :key="rowIdx">
        <view class="goods-card" v-for="(item, idx) in row" :key="idx" @click="goToDetail(item.id)">
          <image :src="item.img" class="goods-img" />
          <view class="goods-info">
            <view class="goods-tags">
              <text v-for="(tag, tIdx) in item.tags" :key="tIdx" :class="'goods-tag ' + tag.type">{{ tag.text }}</text>
            </view>
            <view class="goods-title">{{ item.title }}</view>
            <view class="goods-desc">{{ item.desc }}</view>
            <view class="goods-bottom">
              <view class="goods-price-line">
                <text class="price">￥{{ item.price }}</text>
              </view>
              <button class="buy-btn">立即抢</button>
            </view>
          </view>
        </view>
      </view>
      <view v-if="loading" class="loading-text">加载中...</view>
      <view v-if="finished" class="finished-text">没有更多了</view>
    </view>
  </view>
</template>

<script>
import { list } from '@/api/index'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
export default {
  components: { uniIcons },
  data() {
    return {
      goodsList: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      keyword: '',
      sortType: 1, // 默认综合
      priceOrder: 'asc',
      sortTabs: [
        { type: 1, label: '综合' },
        { type: 2, label: '销量' },
        { type: 3, label: '价格' } // 价格tab，点击切换3/4
      ]
    }
  },
  computed: {
    goodsRows() {
      const rows = []
      for (let i = 0; i < this.goodsList.length; i += 2) {
        rows.push(this.goodsList.slice(i, i + 2))
      }
      return rows
    }
  },
  onLoad(options) {
    this.keyword = options.keyword || '';
    this.pageNum = 1;
    this.finished = false;
    this.getGoodsList();
  },
  onReachBottom() {
    this.loadMoreGoods();
  },
  methods: {
    async getGoodsList(isLoadMore = false) {
      if (this.loading || this.finished) return;
      this.loading = true;
      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyword: this.keyword,
          sort: this.sortType
        };
        const res = await list(params);
        const records = res.rows || [];
        const newGoods = records.map(item => ({
          img: item.imgUrl,
          title: item.goodsName,
          desc: item.introduce,
          price: item.price,
          originPrice: item.originPrice || '',
          tags: item.tagName
            ? item.tagName.split(',').map(tag => ({ text: tag, type: 'green' }))
            : [],
          id: item.id
        }));
        if (isLoadMore) {
          this.goodsList = this.goodsList.concat(newGoods);
        } else {
          this.goodsList = newGoods;
        }
        this.total = res.total || 0;
        if (this.goodsList.length >= this.total) {
          this.finished = true;
        } else {
          this.pageNum++;
        }
      } catch (e) {}
      this.loading = false;
    },
    loadMoreGoods() {
      this.getGoodsList(true);
    },
    changeSort(type) {
      if (type === 3) {
        // 价格tab，切换3/4
        if (this.sortType === 3) {
          this.sortType = 4;
        } else if (this.sortType === 4) {
          this.sortType = 3;
        } else {
          this.sortType = 3;
        }
      } else {
        this.sortType = type;
      }

      this.pageNum = 1;
      this.finished = false;
      this.getGoodsList();
    },
    clearKeyword() {
      this.keyword = '';
    },
    onSearch() {
      this.pageNum = 1;
      this.finished = false;
      this.getGoodsList();
    },
    goCart() {
      // 跳转到购物车页面，按你的实际路径调整
      uni.switchTab({ url: '/pages/cart/index' });
    },
    goToDetail(id) {
      uni.navigateTo({ url: `/pages/product/detail?id=${id}` });
    }
  }
}
</script>

<style scoped>
.result-page {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 20px;
}
.result-header {
  display: flex;
  align-items: center;
  padding: 10px 12px 0 12px;
  background: #fff;
}
.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f7f7f7;
  border-radius: 22px;
  padding: 0 12px;
  height: 38px;
  margin-right: 12px;
}
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #333;
  margin-left: 6px;
}
.search-clear {
  font-size: 18px;
  color: #bbb;
  margin-left: 4px;
  cursor: pointer;
}
.cart-icon {
  margin-left: 4px;
}
.filter-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #888;
  padding: 12px 0 8px 0;
  position: relative;
  font-weight: 500;
  transition: color 0.2s;
}
.tab-item.active {
  color: #ff4d4f;
  font-weight: bold;
}
.tab-underline {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 28px;
  height: 3px;
  background: #ff4d4f;
  border-radius: 2px;
  transform: translateX(-50%);
}
/* 商品列表样式已移至全局样式文件 */
.price-arrow {
  font-size: 13px;
  margin-left: 2px;
  color: #ff4d4f;
  font-weight: bold;
  vertical-align: middle;
}
.search-btn {
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 0 16px;
  height: 32px;
  font-size: 14px;
  margin-left: 8px;
}
</style> 